// 目标
// 1. 导入 Message组件
// 2. 封装并导出 message函数
//     message({type: '', text:'' }) 等价于动态创建Message组件，实现弹框提示的效果

// 实现步骤：
// 1. 用 createVNode 将 导入的Message组件 生成 vnode 虚拟dom元素
// 2. 用 render 将vnode 渲染到 真实的 dom上
// 3. 把 真实的 dom 添加到页面上 添加父节点
import XtxMessage from './index.vue'
import { createVNode, render } from 'vue'

export function Message({ type, text }) {
  // 1. 用 createVNode 将 导入的Message组件 生成 vnode 虚拟dom元素
  // createVNode(XtxMessage, XtxMessage组件的props)
  const vnode = createVNode(XtxMessage, { type, text })
  // 2. 用 render 将vnode 渲染到 真实的 dom上
  // 首先需要一个空的容器 来接收
  const div = document.createElement('div') // 空的dom 容器
  render(vnode, div) // XtxMessage 对的dom填充到div
  // console.log(div)

  // 3. 把 真实的 dom 添加到页面上 即 div 里
  document.body.appendChild(div)

  // 4. 显示 1500ms之后，消失
  setTimeout(() => {
    // 移除
    // document.body.removeChild(div)

    // 填充空内容
    render(null, div)
  }, 1500)
}
